<!-- <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF - 8">
    <title>Send Data</title>
    <style>
        body {
            font-family: Arial, sans - serif;
        }
    </style>
</head>

<body>
    <form id="myForm">
        <label for="name">球队名:</label>
        <input type="text" id="name" name="name"><br>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age"><br>
        <input type="submit" value="提交">
    </form>
    <table></table>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#myForm').submit(function (e) {
                e.preventDefault();
                const formData = $(this).serializeJSON();
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:3000/api/read',
                    data: formData,
                    success: function (response) {
                        console.log(response);
                    },
                    error: function (error) {
                        console.error(error);
                    }
                });
            });

        })


    </script>
</body>

</html> -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Send Data</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        
        form {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin: 10px 0 5px;
        }
        
        input {
            width: 100%;
            padding: 8px;
            margin: 5px 0 15px;
            box-sizing: border-box;
        }
        
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        table, th, td {
            border: 1px solid #ddd;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #f2f2f2;
        }
        
        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>球队信息表单</h1>
        <form id="myForm">
            <label for="name">球队名:</label>
            <input type="text" id="name" name="name" required><br>
            <label for="age">年龄:</label>
            <input type="number" id="age" name="age" min="0" required><br>
            <button type="submit">提交</button>
        </form>
        
    </div>
    
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script>
        // 存储球队数据的数组
        let teams = [];
        
        $(document).ready(function () {
            // 表单提交处理
            $('#myForm').submit(function (e) {
                e.preventDefault();
                
                // 获取表单数据
                const formData = {
                    name: $('#name').val(),
                    age: $('#age').val()
                };
                
                // 清空输入字段
                $('#name').val('');
                $('#age').val('');
                
                
            // 发送AJAX请求
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:3000/api/write', 
                    data: JSON.stringify(formData),
                    contentType: 'application/json',
                    success: function (response) {
                        hideLoadingMessage();
                        showSuccessMessage('数据保存成功！');
                        
                        // 将新团队添加到本地数组
                        formData.id = Date.now(); // 使用时间戳作为ID
                        teams.push(formData);
                        
                        // 渲染更新后的表格
                        renderTable();
                    },
                    error: function (error) {
                        hideLoadingMessage();
                        showErrorMessage('保存数据失败，请重试。');
                        console.error('Error:', error);
                    }
                });
            });
            
            // 页面加载时从服务器获取现有数据并渲染
            fetchTeams();
        });
        
            $.ajax({
                type: 'GET',
                url: 'http://localhost:3000/api/read',
                success: function (response) {
                    hideLoadingMessage();
                    if (response && response.length > 0) {
                        teams = response;
                        renderTable();
                    } else {
                        showInfoMessage('暂无数据');
                    }
                },
                error: function (error) {
                    hideLoadingMessage();
                    showErrorMessage('无法加载数据，请稍后再试。');
                    console.error('Error:', error);
                }
            });
        
    </script>
</body>

</html>